<template>
	<view class="u-p-b-40">
		<u-navbar title-color="#333" title-bold title-size="36" title="提现" :border-bottom="false"
			:background="{backgroundColor: '#FEF1E2'}"></u-navbar>
		<view class="top-div">
			<view class="jf-div">
				<view class="font_12_333">
					可提现金额
				</view>
				<view class="jf-num u-m-t-14">
					<span class="u-font-32">￥</span>
					{{money}}
				</view>

			</view>
		</view>

		<view class="to120">
			<view class="tx-item">
				<view class="font_12_333">
					提现金额
				</view>
				<view class="flex flex_sb u-m-t-30 bobtm">
					<view class="flex u-p-b-16">
						<view class="fuhao">￥</view>
						<view class="u-m-l-20 ">
							<u-input v-model="price" type="number" :clearable="false" />
						</view>
					</view>
					<!-- <view class="" @click="price = userInfo.price">
						全部提现
					</view> -->
				</view>
				<view class="flex flex_sb u-m-t-58">
					<view class="">
						提现至
					</view>
					<view class=" font_12_333" @click="zixunShow=true">
						{{type!==''?typelable:'选择提现方式'}}	
						<u-icon name="arrow-right" color="#333" size="28"></u-icon>
					</view>
				</view>
				<view class="tx-btn u-m-t-60" @click="tixian">
					申请提现
				</view>
			</view>
		</view>
		<view class="jilv">
			<view class="text-tx flex">
				提现记录
			</view>
			<view class="jl-item flex flex_sb" v-for="(item,index) in txList" :key="index">
				<view class="flex">
					<image class="tx-icon" src="../../static/img/mine/tixian-icon.png" mode=""></image>
					<view class="u-m-l-20">
						<view class="font_16_333 font_weight">
							提现
						</view>
						<view class="font_12_999 u-m-t-14">
							{{item.created_at}}
						</view>
					</view>
				</view>
				<view class="">
					<span class="fh">￥</span>
					<span class="num">{{item.money}}</span>
				</view>
			</view>
		</view>
		
		<u-popup v-model="zixunShow" mode="bottom" closeable border-radius="32">
			<view class="po-bikan">
				<view class="bk-title u-m-b-32 text_center">
					选择提现方式
				</view>
				<!-- <view class="po-top flex flex_sb">
					<view class="po-top-item flex" @click="selwx">
						<image class="po-icon" src="../../static/img/mine/wx-icon.png" mode=""></image>
						<view class="font_14_999 u-m-l-32">
							提现到微信
						</view>
					</view>
					<view class="po-top-item flex">
						<image class="po-icon" src="../../static/img/mine/zfb-icon.png" mode=""></image>
						<view class="font_14_999 u-m-l-32">
							提现到支付宝
						</view>
					</view>
				</view> -->
				<view class="font_14_999 u-m-t-34 u-m-b-34">
					提现到银行卡
				</view>
				<scroll-view scroll-y="true" style="max-height: 600rpx;">
					<view class="po-main">
						<view class="po-main-item flex border_bottom_F6F6F6" v-for="(item,index) in cardList" :key="index" @click="selcard(item)">
							<!-- <image class="po-icon" :src="item.logo" mode=""></image> -->
							<view class=" u-m-l-24">
								{{item.card_type}}
							</view>
						</view>
						<view class="po-main-item flex flex_sb" @click="binding">
							<view class="flex">
								<image class="po-icon" src="../../static/img/mine/qb-icon.png" mode=""></image>
								<view class=" u-m-l-24">
									绑定新银行卡
								</view>
							</view>
							<view class="">
								<u-icon name="arrow-right" color="#333" size="28"></u-icon>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: '',
				type:'',//0银行卡 1微信
				typelable:'',//0银行卡 1微信
				card_id:'',
				txshow:false,
				zixunShow:false,
				cardList:[],
				userInfo:[],
				txList:[],
				
				total:0,
				pageNum:1,
				pageSize:10,
				
				type2:'',
				money:''
			}
		},
		onLoad(e) {
			this.type2 = e.type
			this.getInfo()
			this.tixianlist()
		},
		onShow() {
			if(this.type2){
				this.getInfo()
			}
			
			this.pageNum = 1
			this.tixianlist()
			this.cardlist()
		},
		onReachBottom() {
			if (this.pageNum * this.pageSize > this.total) {
				// uni.hideNavigationBarLoading();
			} else {
				this.pageNum++;
				this.tixianlist()
			}
		},
		methods: {
			//个人信息
			getInfo() {
				let url = ""
				if(this.type2==1){
					url='/getUserInfo'
				}else{
					url='/lawyer/getLawyer'
				}
				this.$api({
					url: url,
					method: 'get',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.money = res.data.money
					} 
				})
			},
			cardlist(){
				this.$api({
					url: '/getUserBank',
					method: 'get',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.cardList = res.data
						
					}
				})
			},
			tixianlist(){
				this.$api({
					url: '/tx_log',
					method: 'get',
					data: {
						token:uni.getStorageSync("token"),
						page:this.pageNum,
						limit:this.pageSize,
					},
				}).then(res => {
					if (res.code == 1) {
						// this.txList = res.data
						this.total=res.data.total
						let data = res.data.data
						if (this.pageNum == 1) {
							this.txList = data
						} else {
							this.txList = [...this.txList, ...data]
						}
					}
				})
			},
			
			binding(){
				uni.navigateTo({
					url:"/pages/mine/bindingCard"
				})
			},
			selwx(){
				this.typelable='微信'
				this.type=1
				this.zixunShow = false
			},
			selcard(item){
				console.log(item)
				this.typelable=item.card_type
				this.type=0
				this.card_id=item.id
				this.zixunShow = false
			},
			tixian(){
				
				if(this.price==0 || this.price % 100 !== 0){
					uni.showToast({
						title: "提现金额不能为0，只能是100的整数倍",
						icon: "none"
					});
					return
				}
				if(!this.card_id){
					uni.showToast({
						title: "请选择银行卡",
						icon: "none"
					});
					return
				}
				
				
				this.$api({
					url: '/tx',
					method: 'post',
					data: {
						token:uni.getStorageSync("token"),
						price:this.price,
						// type:this.type,
						card_id:this.card_id
					},
				}).then(res => {
					if (res.code == 1) {
						this.price = ''
						uni.navigateTo({
							url:"/pages/mine/withdrawalSuccess"
						})
					}
				})
				
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.po-top{
		
		.po-top-item{
			width: 668rpx;
			height: 116rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 0 24rpx;
			.po-icon{
				width: 52rpx;
				height: 52rpx;
				// background: #eee;
			}
		}
	}
	.po-main{
		width: 686rpx;
		// height: 696rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 0 24rpx;
		.po-main-item{
			height: 116rpx;
			.po-icon{
				width: 52rpx;
				height: 52rpx;
				background: #eee;
			}
		}
	}
	.po-bikan {
		padding: 40rpx 32rpx;
		background: #F6F6F6;
		width: 100%;
	
		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}
	}
	.jilv{
		border-radius: 16rpx;
		background: #FFFFFF;
		width: 686rpx;
		margin: 20rpx auto;
		padding: 0 24rpx;
		.text-tx{
			font-weight: bold;
			border-bottom: 2rpx solid #EBEBEB;;
			font-size: 32rpx;
			color: #222222;
			height:112rpx;
		}
		.jl-item{
			// width: 686rpx;
			height: 142rpx;
			background: #FFFFFF;
			.tx-icon{
				width: 64rpx;
				height: 64rpx;
			}
			.fh{
				font-size: 24rpx;
				color: #FC3A30;
			}
			.num{
				font-size: 36rpx;
				color: #FC3A30;
			}
		}
	}
	
	.tx-item {
		width: 686rpx;
		padding: 34rpx 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		.tx-btn{
			width: 638rpx;
			height: 80rpx;
			background: linear-gradient( 177deg, #FFF7EA 0%, #ECA561 100%);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-weight: bold;
			text-align: center;
			line-height: 80rpx;
			margin: 0 auto;
			font-size: 36rpx;
			color: #773E00;
		}
		.bobtm {
			border-bottom: 2rpx solid #E4F2EB;
			
		}

		/deep/ .uni-input-input {
			font-size: 50rpx;
			font-weight: bold;
			width: 350rpx;
		}

		.fuhao {
			font-weight: 600;
			font-size: 56rpx;
			color: #333333;
		}
	}

	.to120 {
		margin-top: -160rpx;
		position: relative;
		z-index: 10;
	}

	.top-div {
		width: 750rpx;
		height: 330rpx;
		background: linear-gradient(180deg, #FEF1E2 0%, #FFF1E1 59%, rgba(254, 241, 226, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: relative;

		.jf-div {
			padding: 18rpx 52rpx;
			padding-top: 52rpx;
		}

		.jf-num {
			font-weight: bold;
			font-size: 56rpx;
			color: #333333;
		}

	}
</style>